import AppContainer from '@/components/AppContainer';

import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import useList from '@/hooks/useList';
import { queryCertificate } from '@/service/globalSetting';
import { PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Table, Tag } from 'antd';
import { ColumnsType } from 'antd/lib/table';

import React from 'react';
import SaveCertificate from './components/SaveCertificate';

const App = () => {
  let [form] = Form.useForm()
  const { tableProps, search, refresh } = useAntdList(queryCertificate, { form })
  const saveCertificate = useAntdModal({ refresh })
  const columns: ColumnsType<any> = [{
    title: '名称',
    dataIndex: 'title'
  }, {
    title: '类型',
    // dataIndex: 'type'
    render(_) {
      let c:any = {
        Npm:'#cb0202',
        git:'#f64d28'
      }
      return <Tag color={c[_.type]}>{_.type}</Tag>
    }
  }, {
    title: '服务地址',
    dataIndex: 'serviceUrl'
  }, {
    title: '凭证',
    render(_) {
      if (_.authMode == 'account') {
        return <div>
          <p>账号：</p>
          <p>密码：xxx</p>
        </div>
      }
      if (_.authMode == 'token') {
        return <div>
          <p>token：{_.token}</p>
         
        </div>
      }
      if (_.authMode == 'ssh') {
        return <div>
          <p>公钥：{_.publicKey}</p>
          <p>私钥：{_.privateKey}</p>
         
        </div>
      }
      return null
    }
    // dataIndex: 'username'
  },{
    title: '是否默认',
    // dataIndex: 'default'
    render(_){
     if(_.default===1){
      return <Tag color='green'>是</Tag>
     }
    }
  }, {
    title: '操作',
    render(_) {
      return <div>
        <Button type='link' onClick={() => saveCertificate.openModal(_)}>编辑</Button>
      </div>
    }
  }
  ]

  return (
    <AppContainer queryFilter={
      <QueryFilter form={form} submit={search.submit} reset={search.reset} >
        <Form.Item label="名称"> <Input /></Form.Item>
        <Form.Item label="类型"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>

      </QueryFilter>
    }
      toolbar={<Toolbar leftRender={<Button  type='primary'  icon={<PlusOutlined />} onClick={() => saveCertificate.openModal()}>创建</Button>} />}
    >
      <SaveCertificate {...saveCertificate} />

      <Table
        rowKey="id"
        columns={columns}
        {...tableProps}

        onChange={(pagination) => {
          // setPage(pagination.current);
        }}
      // pagination={{ total, current: page, pageSize: 5, simple: true }}
      />

    </AppContainer>)
}
export default App